import React, { useState, useEffect, useRef } from "react";
import DraggleLayout, { DraggleLayoutProps } from "@/components/DraggleLayout";
import "./demo.scss";

interface DragDemoProps {}
const DragDemo: React.FC<DragDemoProps> = () => {
  const contentRef = useRef<HTMLDivElement>(null);
  const leftDomRef = useRef<HTMLDivElement>(null);
  const rightDomRef = useRef<HTMLDivElement>(null);

  const [init, setInit] = useState<boolean>(false);

  const draggleLayoutProps: DraggleLayoutProps = {
    contentDom: contentRef.current,
    leftDom: leftDomRef.current,
    rightDom: rightDomRef.current
  };

  useEffect(() => {
    setInit(true);
  }, []);

  return (
    <div className="content-wrapper" ref={contentRef}>
      <div className="left" ref={leftDomRef}>
        左侧
      </div>
      {init && <DraggleLayout {...draggleLayoutProps} />}
      <div className="right" ref={rightDomRef}>
        右侧
      </div>
    </div>
  );
};
export default DragDemo;
